<template>
  <div class="table-main">
    <div class="tab-search">
      <div class="search-cont">
        <div class="search-name">商铺名字:</div>
        <el-input v-model="searchFrom.shopName" placeholder="请输入内容"></el-input>
      </div>
      <div class="search-btns">
        <el-button type="primary" size="small" @click="handSearch()">查询</el-button>
        <el-button size="small" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="hadn-new">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="handAdd()">新建</el-button>
      <!-- <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="onConfirm">
        <el-button slot="reference" size="small" icon="el-icon-minus" @click="handSeleDel">删除</el-button>
      </el-popconfirm>-->
    </div>
    <div class="hand-btns">
      <span class="el-icon-warning" style="color:#38AD93;"></span>
      <span class="btns-title">
        已选择
        <span style="color:#38AD93;">{{multipleSelection.length}}</span> 项
      </span>
      <span class="btns-clos pointer" @click="handSeleColse">清空</span>
      <div class="fun_box">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top-start">
          <span class="el-icon-refresh init" @click="init()"></span>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出表格" placement="top-start">
          <span class="el-icon-printer dow_up" @click="handDowUp"></span>
        </el-tooltip>
        <el-dropdown>
          <div
            style="width:45px;height:32px;text-align:center;line-height:32px;backgroundColor:#fff;margin-left:22px;"
          >
            <i class="el-icon-s-fold"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>暂无更多</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="店铺名称">
        <template slot-scope="scope">{{ scope.row.shopName }}</template>
      </el-table-column>
      <el-table-column prop="shopAddress" label="店铺地址"></el-table-column>
      <el-table-column prop="serviceStartTime" label="营业时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="serviceEndTime" label="打样时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="visitNum" label="访问量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="shopAtive" label="营业状态" show-overflow-tooltip>
        <template
          slot-scope="scope"
        >{{ scope.row.shopAtive==1?'营业中':(scope.row.shopAtive==2?'休息':'冻结') }}</template>
      </el-table-column>
      <el-table-column prop="shopStatus" label="审核状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="sige_box">
            <span
              class="sige"
              :style="{backgroundColor:scope.row.shopStatus==1?'#52C41A':(scope.row.shopStatus==2?'#F7B500':'#E02020')}"
            ></span>
            <span>{{ scope.row.shopStatus==1?'已审核':(scope.row.shopStatus==2?'待审核':'拒绝/停用') }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="shopAtive" label="操作" show-overflow-tooltip width="260">
        <template slot-scope="scope">
          <div class="shop_btns">
            <el-button type="text" @click="handDetail(scope.row)">详情</el-button>
            <el-button type="text" @click="handEdit(scope.row)">编辑</el-button>

            <el-popover
              placement="top"
              width="160"
              trigger="click"
              :ref="'popover-' + scope.row.id"
              style="margin-left:10px;"
            >
              <p>确定要{{scope.row.shopAtive==3?'上线':'冻结'}}当前店铺吗?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="handPopClos(scope.row)">取消</el-button>
                <el-button type="primary" size="mini" @click="handPopDel(scope.row)">确定</el-button>
              </div>
              <el-button
                type="text"
                @click="handDel(scope.row)"
                slot="reference"
              >{{scope.row.shopAtive==3?'上线':'冻结'}}</el-button>
            </el-popover>
            <el-button type="text" @click="addGoods(scope.row)">添加商品</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pags_box">
      <el-pagination
        @size-change="handBidleSizeChange"
        @current-change="handBidleCurrentChange"
        :current-page="pageBid.start"
        :page-sizes="[5,10,15]"
        :page-size="pageBid.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBid.totalCount"
      ></el-pagination>
    </div>
    <shopDig :newId="newId" :form="form" :isState="isState" ref="shopDig"></shopDig>
    <addGoods ref="goodsDig"></addGoods>
  </div>
</template>

<script>
import axios from 'axios'
import shopDig from './shopDig/index'
import addGoods from '../goodsGuanLi/shopDig/index'
import { parseTime } from '@/utils'
import { ifObj } from '@/utils/myUtils'
export default {
  name: 'SidebarLogo',
  components: {
    shopDig,
    addGoods,
  },
  data() {
    return {
      dialogVisible: false,
      title: '云贸联程',
      logo:
        'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
      searchFrom: {
        shopName: '',
        shopStatus: 1,
      },
      shopStatusOptions: [
        {
          label: '已通过',
          value: '1',
        },
        {
          label: '未审核',
          value: '2',
        },
        {
          label: '已拒绝',
          value: '3',
        },
      ],
      tableData: [],
      multipleSelection: [],
      loading: true,
      pageBid: {
        start: 1,
        limit: 10,
        totalCount: 0,
        tatalpage: 0,
      },
      isState: 0,
      form: {},
      ids: '',
      newId: 0,
    }
  },
  mounted() {
    this.loading = true
    this.$api
      .getHomeList({
        page: this.pageBid.start,
        limit: this.pageBid.limit,
        searchObj: this.searchFrom,
      })
      .then((res) => {
        console.log(res, '商品')
        this.loading = false
        this.tableData = res.data.data
        this.pageBid.totalCount = res.data.count
        this.tableData.forEach((item) => {
          item.visible2 = false
        })
      })
  },
  methods: {
    addGoods(row) {
      console.log(row.id, 'row')
      this.isState = 0
      this.$refs.goodsDig.handGetList(1, row.id)
      this.$refs.goodsDig.dialogVisible1 = true
    },
    formatJson(filterVal) {
      return this.tableData.map((v) =>
        filterVal.map((j) => {
          if (j === 'shopName') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    //导出表格
    handDowUp() {
      if (this.tableData.length == 0) {
        this.$message({
          message: '暂无数据',
        })
        return
      }
      this.loading = true
      import('@/vendor/Export2Excel').then((excel) => {
        const tHeader = [
          '店铺名称',
          '店铺地址',
          '营业时间',
          '打样时间',
          '营业状态',
        ]
        const filterVal = [
          'shopName',
          'shopAddress',
          'serviceStartTime',
          'serviceEndTime',
          'shopAtive',
        ]
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '云贸联程',
        })
        this.loading = false
      })
    },
    //清空选中
    handSeleColse() {
      this.$refs.multipleTable.clearSelection()
    },
    closeFrom() {
      for (let key in this.form) {
        this.form[key] = ''
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    handAdd() {
      this.isState = 0
      // this.dialogVisible = true
      this.$refs.shopDig.dialogVisible1 = true
      this.$refs.shopDig.value4 = []
    },
    handSearch() {
      this.init(this.searchFrom)
    },
    reset() {
      if (this.searchFrom.shopName == '') {
        return
      }
      for (let key in this.searchFrom) {
        this.searchFrom[key] = ''
      }
      this.init()
      this.$message({
        message: '重置成功',
        type: 'success',
      })
    },
    handDetail(row) {
      this.isState = 3
      // this.form = row
      this.newId = row.id
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.dialogVisible1 = true
    },
    handEdit(row) {
      this.isState = 1
      // this.form = row
      this.newId = row.id
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.dialogVisible1 = true
    },
    handPopClos(row) {
      this.$refs[`popover-` + row.id].doClose()
    },
    handPopDel(row) {
      let newForm = { id: row.id, shopAtive: 3, shopStatus: row.shopStatus }
      if (row.shopAtive == 3) {
        newForm.shopAtive = 1
      } else {
        newForm.shopAtive = 3
      }
      this.$api.getShopEdit(newForm).then((res) => {
        console.log(res, '冻结')
        if (res.data.code == 200) {
          // this.$message(res.data.message)
          this.$message({
            message: res.data.message,
            type: 'success',
          })
          this.$refs[`popover-` + row.id].doClose()
          this.init()
        }
      })
    },
    handDel(row) {
      // row.visible2 = true
      this.$set(row, 'visible2', true)
    },
    init(searchObj) {
      if (searchObj == '' || !searchObj) {
        searchObj = {}
      }
      this.searchFrom.shopStatus = 1
      this.loading = true
      this.$api
        .getHomeList({
          page: this.pageBid.start,
          limit: this.pageBid.limit,
          searchObj: this.searchFrom,
        })
        .then((res) => {
          console.log(res, '商品')
          this.loading = false
          this.tableData = res.data.data
          this.pageBid.totalCount = res.data.count
        })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //多选删除
    handSeleDel() {},
    onConfirm() {
      if (this.ids != '') {
        this.$api.getShopDel({ id: this.ids }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success',
            })
            this.init()
          }
        })
      } else {
        this.$message('请至少选择一条')
      }
      console.log('queding')
    },
    onCancel() {},
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach((item) => {
        this.multipleSelection.push(item.id)
      })
      this.ids = this.multipleSelection.join(',')
      console.log(this.multipleSelection.join(','), '多选')
    },
    handBidleSizeChange(val) {
      this.pageBid.limit = val
      this.init()
    },
    handBidleCurrentChange(val) {
      this.pageBid.start = val
      this.init()
    },
  },
}
</script>

<style lang="scss" scoped>
.shop_btns .el-button {
  color: #38ad93 !important;
}
.sige_box {
  display: flex;
  align-items: center;

  .sige {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    // background: rgba(82, 196, 26, 1);
    display: block;
    margin-right: 7px;
  }
}

.table-main {
  background-color: #fff;

  .hand-btns {
    height: 40px;
    border: 1px solid rgba(56, 173, 147, 0.17);
    line-height: 40px;
    border: 5px;
    background-color: #ebf6f4;
    padding: 0 16px;
    .btns-title {
      color: #000000;
      font-size: 14px;
      margin: 0 14px;
    }
    .btns-clos {
      color: #4eb69f;
      font-size: 14px;
    }
  }
  .hadn-new {
    margin-bottom: 24px;
  }
  .search-btns {
    display: flex;
    align-content: center;

    .search-btn {
      width: 65px;
      height: 32px;
      background: rgba(56, 173, 147, 1);
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      margin-right: 8px;
    }
    .search-reset {
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(217, 217, 217, 1);
    }
  }
  .tab-search {
    display: flex;
    align-content: center;
    margin-bottom: 28px;
    .search-cont:first-child {
      margin-right: 85px;
    }
    .search-cont {
      display: flex;
      align-content: center;
      line-height: 32px;
      .search-name {
        font-size: 14px;
        color: #000;
        margin-right: 12px;
      }
    }
  }
}
</style>
